<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="tailwind.css" rel="stylesheet" />
  </head>
  <body>
    <div class="p-8">
      <h1 class="text-4xl font-bold mb-2">Figma → GitHub → Tailwind</h1>
      <p class="text-xl text-theme-fg-muted mb-4">This example transforms tokens stored on GitHub to Style Dictionary ready files which in turn triggers TailwindCSS.</p>
      <button class="p-2 bg-theme-accent-default text-theme-fg-onAccent font-bold" id="switch" onclick="toggleTheme()">Switch</button>
    </div>
    <script>
      function setTheme(name) {
        localStorage.setItem("theme", name);
        document.documentElement.className = name;
      }

      function toggleTheme() {
        if (localStorage.getItem("theme") === "dark-theme") {
          setTheme("light-theme");
        } else {
          setTheme("dark-theme");
        }
      }

      (function () {
        if (localStorage.getItem("theme") === "dark-theme") {
          setTheme("dark-theme");
        } else {
          setTheme("light-theme");
        }
      })();
    </script>
  </body>
</html>
